<template>
    <view class="story" style="background-color: #e0ede9; width: 100%">
        <view
            style="
                left: 0;
                top: 0;
                background-color: #dfede9;
                width: 100%;
                height: 100%;
                z-index: -1;
                position: absolute;
            "
        ></view>
        <view style="height: 20rpx"></view>
        <view class="story-main">
            <block v-for="(item, index) in storyList" :key="index">
                <view class="story-item" @click="goDetail(item, index)">
                    <view class="story-top">
                        <image
                            style="background-color: #eaeaea; border-radius: 50%"
                            :src="item.avatarAbsolute"
                            mode=""
                        ></image>
                        <view
                            style="
                                font-size: 28rpx;
                                width: calc(100% - 100rpx);
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                                overflow: hidden;
                            "
                            >{{ item.userName }}</view
                        >
                    </view>
                    <view class="story-content">{{ item.weightExperience }}</view>
                    <view class="story-img">
                        <view class="story-img-item">
                            <image style="border-radius: 16rpx" :src="item.beforePicAbsolute" mode=""></image>
                            <view class="story-before"
                                ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homemenu/before_icon.png" mode=""></image
                            ></view>
                        </view>
                        <view class="story-img-item">
                            <image style="border-radius: 16rpx" :src="item.afterPicAbsolute" mode=""></image>
                            <view class="story-before"
                                ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homemenu/after_icon.png" mode=""></image
                            ></view>
                        </view>
                    </view>
                </view>
            </block>
            <u-loadmore
                v-if="more"
                :status="status"
                loadingText="加载中"
                loadmoreText="上拉加载更多"
                nomoreText="已经到底啦～"
                fontSize="28"
                iconSize="30"
                marginTop="20"
                marginBottom="30"
            ></u-loadmore>
        </view>
        <view v-if="storyList.length == 0 && isloading == false" class="story_null_view">
            <image
                style="width: 316rpx; height: 316rpx; margin-top: 256rpx"
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
            ></image>
            <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx">暂无用户故事</label>
        </view>
        <view class="footer" style="bottom: env(safe-area-inset-bottom)">
            <navigator @click="goToModular()" hover-class="none" class="footer-item">生成我的故事</navigator>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            empty: false,
            storyList: [],
            storyForm: {
                isAsc: "descending",
                orderByColumn: "top desc,topTime desc,submitTime",
                pageNum: 1,
                pageSize: 10,
            },
            status: "loadmore",
            more: false,
            isloading: false,
        };
    },
    onReachBottom() {
        if (this.more == false) return;
        this.status = "loading";
        this.storyForm.pageNum = ++this.storyForm.pageNum;
        this.requestStorys(false);
    },
    computed: {
        ...mapState(["isLogin", "userInfo"]),
    },
    methods: {
        ...mapMutations(["loginSaveUserInfo", "logout"]),
        goToModular() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "./modular",
            });
        },
        requestUser() {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/detail/${this.userInfo.uid}`, null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        this.loginSaveUserInfo(res.data);
                    }
                });
        },
        isAuthNicknamePhone() {
            if (this.userInfo.nickname == "" || this.userInfo.nickname == null || this.userInfo.nickname == undefined) {
                this.authUserInfo();
                return false;
            }
            if (this.userInfo.phone == "" || this.userInfo.phone == null || this.userInfo.phone == undefined) {
                uni.navigateTo({
                    url: "/pages/login/login",
                });
                return false;
            }
            return true;
        },
        authUserInfo() {
            uni.getUserProfile({
                desc: "Wexin",
                success: (res) => {
                    let avatar = res.userInfo.avatarUrl;
                    let nickname = res.userInfo.nickName;
                    this.sendUserInfo(avatar, nickname);
                },
            });
        },
        sendUserInfo(avatar, nickname) {
            var postData = {};
            postData.uid = this.userInfo.uid;
            postData.avatar = avatar;
            postData.nickname = nickname;
            this.request.httpTokenJsonRequest("/mp-api/wx/user/update", postData, "POST", false).then((res) => {
                if (res.code == 0) {
                    if (res.data.phone == "" || res.data.phone == null || res.data.phone == undefined) {
                        uni.navigateTo({
                            url: "/pages/login/login",
                        });
                    }
                    this.requestUser();
                }
            });
        },
        back() {
            uni.navigateBack();
        },
        goDetail(item, index) {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            if (item.templateId == 1) {
                uni.navigateTo({ url: "./storydetail?id=" + item.id + "&index=" + index + "" });
            } else if (item.templateId == 2) {
                uni.navigateTo({ url: "./storydetail1?id=" + item.id + "&index=" + index + "" });
            }
        },
        requestStorys(isFresh) {
            if (isFresh) {
                this.storyForm.pageNum = 1;
                this.storyForm.pageSize = 10;
                this.isloading = true;
            }
            this.request.httpTokenRequest("/mp-api/wx/story/list", this.storyForm, "POST", false).then((res) => {
                uni.stopPullDownRefresh();
                this.isloading = false;
                if (res.code == 0) {
                    if (res.data.list && isFresh) {
                        this.storyList = res.data.list;
                    } else {
                        res.data.list.forEach((item) => {
                            this.storyList.push(item);
                        });
                    }
                    if (res.data.total > this.storyList.length) {
                        this.status = "loadmore";
                        this.more = true;
                    } else {
                        this.more = false;
                        this.status = "nomore";
                    }
                } else {
                    this.more = false;
                    this.status = "nomore";
                }
            });
        },
    },
    onShow() {
        this.requestStorys(true);
    },
    onPullDownRefresh() {
        this.requestStorys(true);
    },
};
</script>

<style lang="scss" scoped>
// body,.story{height: 100%;min-height: 100vh ;background-position: center;background-color:#E0EDE9;}
// uni-page-body,html{height: 100%;background-color:#E0EDE9 ;}
.story-before image {
    width: 70rpx;
    height: 30rpx;
}
.footer {
    width: 328rpx;
    height: 88rpx;
    box-shadow: 0px 12px 24px 0px rgba(55, 168, 148, 0.2);
    position: fixed;
    bottom: 40rpx !important;
    color: #fff;
    border-radius: 24rpx;
    left: calc(50% - 164rpx);
    font-size: 30rpx;
    font-weight: 600;
}
.story_null_view {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
